/*
 * @Author: liyin 2179253556@qq.com
 * @Date: 2023-05-31 10:46:17
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2023-05-31 15:01:10
 * @FilePath: \hl-registration-view\src\util\directive.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {
    copyData: string | number;
    __handleClick__: any;
}

export const directives = {
    install(Vue: any, options: any) {
        Vue.directive('loadMore', {
            mounted(el: ElType, binding: DirectiveBinding) {
                console.log(binding.arg)
                // 获取element，定义scroll
                // const selectDom: any = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                const selectDom: any = document.querySelector(`.${binding.arg} .el-select-dropdown__wrap`)
                console.log(selectDom)
                // 添加滚动事件
                selectDom.addEventListener("scroll", function () {
                    console.log('滚动了')
                    // scrollHeight所有数据占据面的一个高度,，scrollTop滚动条滚走的区域高度，clientHeight可视区域面积高度
                    const height = selectDom.scrollHeight - selectDom.scrollTop <= selectDom.clientHeight;
                    if (height) {
                        binding.value();
                    }
                });
            },
            beforeUnmount(el: ElType) {
                el.removeEventListener("scroll", el.__handleClick__);
            }
        })
    }
};
export default directives;
